<template>
  <div id="home">
    <nav-bar class="home-nav">
      <div slot="center">购物街</div>
    </nav-bar>
    <!-- 滚动区域组件 -->
    <scroll>
      <!-- 这里调用了封装的轮播图数据，并把轮播图的数据通过父传子传给组件 -->
      <home-swiper :banners="banners"></home-swiper>
      <!-- 这里调用了封装的分类组件 -->
      <recommend-view :recommend="recommend"></recommend-view>
      <feature-view></feature-view>
      <!-- 调用滑块组件 -->
      <tab-control
        :titles="['流行', '新款', '精选']"
        class="tab-controls"
        @guigeClick="gsClick"
      ></tab-control>
      <!-- 调用分类数据组件 -->
      <!-- 把原本写在这里的goods[this.cuttonNum].list抽成了计算属性goodskode -->
      <goods-list :goods="goodskode" />
    </scroll>
  </div>
</template>

<script>
import HomeSwiper from "./childComps/HomeSwiper.vue";
import RecommendView from "./childComps/RecommendView.vue";
import FeatureView from "./childComps/FeatureView.vue";

import NavBar from "@/components/common/navbar/NavBar.vue";
import TabControl from "@/components/content/tabcontrol/TabControl.vue";
import GoodsList from "@/components/content/goods/GoodsList.vue";
import Scroll from "@/components/common/scroll/scroll.vue";

import { getHomeMultidata, getFooterdata } from "@/networt/home";

export default {
  name: "Home",
  data() {
    return {
      banners: [],
      recommend: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      cuttonNum: "pop",
    };
  },
  created() {
    this.getHome();
    // 请求商品数据，在一开始的时候先请求三个类别的数据，使用谁就传谁
    this.getFoot("pop");
    this.getFoot("new");
    this.getFoot("sell");
  },

  methods: {
    /**
     * 数据处理相关代码
     */

    // 根据子元素传回来的事件监听点击
    gsClick(val) {
      switch (val) {
        case 0:
          this.cuttonNum = "pop";
          break;
        case 1:
          this.cuttonNum = "new";
          break;
        case 2:
          this.cuttonNum = "sell";
          break;
      }
    },

    /**
     * 请求相关代码
     */
    getHome() {
      getHomeMultidata()
        .then((result) => {
          // console.log(result.data);
          this.banners = result.data.data.banner.list;
          this.recommend = result.data.data.recommend.list;
        })
        .catch((err) => {});
    },
    getFoot(type) {
      // console.log(type)  //拿到了调用时传入的三个值
      const page = this.goods[type].page + 1; //这里加一是为了一开始显示第一页
      getFooterdata(type, page).then((res) => {
        // console.log(res);
        // console.log(res.data.data.list);
        // 因为函数一旦执行结束后数据就会被销毁，所以要把数据给goods保存
        // ...可以理解为遍历
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page += 1;
      });
    },
  },
  computed: {
    goodskode() {
      return this.goods[this.cuttonNum].list;
    },
  },
  components: {
    NavBar,
    HomeSwiper,
    RecommendView,
    FeatureView,
    TabControl,
    GoodsList,
    Scroll,
  },
};
</script>
<style scoped>
#home {
  /* padding-top: 44px; */
  height: 100vh;
  position: relative;
}
.home-nav {
  background: var(--background-my);
  color: white;
}
.tab-controls {
  position: sticky;
  top: 44px;
  border-bottom: 1px solid #eee;
  line-height: 44px;
  background: white;
}
.wrapper {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
  /* height: calc(100vh - 49px);
  overflow: hidden;  */

}
</style>
